<template>
  <div class="manage">
    <el-dialog
      title="MRI 图像"
      :visible.sync='mriShow'
      width='650px'
    >
      <div class="tp01"><el-image style="width:610px;height:600px" fit='contain' :src="imgUrl"></el-image></div>
      <div style="margin-left:160px">
        <el-table 
          show-overflow-tooltip
          height="500px"
          :data="orView"
          stripe border
        >
          <el-table-column type="index" width="100"></el-table-column>
          <el-tableColumn label="组织器官名称" prop="orName" width="180"></el-tableColumn>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      title="手绘图像"
      :visible.sync='colorShow'
      width='650px'
    >
      <div class="tp02"><el-image style="width:610px;height:600px" fit='contain' :src="colorimgUrl"></el-image></div>
      <div style="margin-left:160px">
        <el-table 
          show-overflow-tooltip
          height="500px"
          :data="orView"
          stripe border
        >
          <el-table-column type="index" width="100"></el-table-column>
          <el-tableColumn label="组织器官名称" prop="orName" width="180"></el-tableColumn>
        </el-table>
      </div>
    </el-dialog>
    <!-- 导入图谱弹窗 -->
    <el-dialog
      title="图谱信息"
      :visible.sync='tpShow01'
      width='700px'
    >
      <el-form
      :model="addTpForm"
      ref="editUserFormRef"
      label-width="70px"
    >
        <el-form-item label="图谱ID" prop="mriID">
            <el-input v-model="addTpForm.mriID"></el-input>
        </el-form-item>
        <el-form-item label="一级部位" prop="firPart">
        <el-select v-model="addTpForm.firPart" placeholder="请选择">
            <el-option
            v-for="item in firOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="二级部位" prop="secPart">
        <el-select v-model="addTpForm.secPart" placeholder="请选择">
            <el-option
            v-for="item in secOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="切面" prop="section">
        <el-select v-model="addTpForm.section" placeholder="请选择">
            <el-option
            v-for="item in sectionOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select> 
        </el-form-item>
        <el-form-item label="MRI图像" prop="imgAddr">
            <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1/upload/mriimg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess01"
            :before-upload="beforeAvatarUpload01">
            <img v-if="imageUrl01" :src="imageUrl01" class="avatar01">
            <i v-else class="el-icon-plus avatar-uploader-icon01"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="彩绘图像" prop="colorImgAddr">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1/upload/mricolor"
            :show-file-list="false"
            :on-success="handleAvatarSuccess02"
            :before-upload="beforeAvatarUpload02">
            <img v-if="imageUrl02" :src="imageUrl02" class="avatar02">
            <i v-else class="el-icon-plus avatar-uploader-icon02"></i>
          </el-upload>
            </el-form-item>
            <el-form-item>
                <el-transfer
                filterable
                :filter-method="filterMethod"
                :titles="['选择', '已选']"
                v-model="value"
                :data="orData"
                target-order="unshift"
                @change="getOrgans">
            </el-transfer>
            </el-form-item>      
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tpShow01=false">取消</el-button>
        <el-button type='primary' @click="addtp()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑图谱弹窗 -->
    <el-dialog
      title="图谱信息"
      :visible.sync='tpShow02'
      width='700px'
    >
      <el-form
      :model="addTpForm"
      ref="editUserFormRef"
      label-width="70px"
    >
        <el-form-item label="图谱ID" prop="mriID">
            <el-input v-model="addTpForm.mriID"></el-input>
        </el-form-item>
        <el-form-item label="一级部位" prop="firPart">
        <el-select v-model="addTpForm.firPart" placeholder="请选择">
            <el-option
            v-for="item in firOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="二级部位" prop="secPart">
        <el-select v-model="addTpForm.secPart" placeholder="请选择">
            <el-option
            v-for="item in secOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="切面" prop="section">
          <el-select v-model="addTpForm.section" placeholder="请选择">
              <el-option
              v-for="item in sectionOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select> 
          </el-form-item>
          <el-form-item label="MRI图像" prop="imgAddr">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1/upload/mriimg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess01"
              :before-upload="beforeAvatarUpload01">
              <img v-if="imageUrl01" :src="imageUrl01" class="avatar01">
              <i v-else class="el-icon-plus avatar-uploader-icon01"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="彩绘图像" prop="colorImgAddr">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1/upload/mricolor"
              :show-file-list="false"
              :on-success="handleAvatarSuccess02"
              :before-upload="beforeAvatarUpload02">
              <img v-if="imageUrl02" :src="imageUrl02" class="avatar02">
              <i v-else class="el-icon-plus avatar-uploader-icon02"></i>
            </el-upload>
          </el-form-item>
            <el-form-item>
                <el-transfer
                filterable
                :filter-method="filterMethod"
                :titles="['选择', '已选']"
                v-model="value"
                :data="orData"
                target-order="unshift"
                @change="getOrgans">
            </el-transfer>
            </el-form-item>      
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tpShow02=false">取消</el-button>
        <el-button type='primary' @click="edittp()">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type='primary' @click="addDialog()">+ 导入图谱</el-button>
      <el-form :inline="true">

        <el-form-item>
          <el-input v-model="inputMRI" placeholder="请输入查询内容" inline="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary " @click="searchMRI()">搜索</el-button>
        </el-form-item>
      </el-form>
      
    </div>
    <div class="tpTable">
    <el-table 
      show-overflow-tooltip
      height="500px"
      :data="tpList"
      stripe border
    >
        <el-table-column type="index" width="80"></el-table-column>
        <el-tableColumn label="图谱ID" prop="mriID" width="120"></el-tableColumn>
        <el-table-column prop="firPart" label="一级部位" width="120"></el-table-column>
        <el-table-column prop="secPart" label="二级部位" width="120"></el-table-column>
        <el-table-column prop="section" label="切面" width="120"></el-table-column>
        <el-table-column prop="imgAddr" label="MRI 图像" width="120">
            <template slot-scope="scope">
                <el-button size="mini" type='primary' @click="tpCheck01(scope.row)">查看</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="colorImgAddr" label="彩绘图像" width="120">
            <template slot-scope="scope">
                <el-button size="mini" type='primary' @click="tpCheck02(scope.row)">查看</el-button>
            </template>
        </el-table-column>

        <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
                <el-button size="mini" @click="editDialog(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="delDialog(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- <el-pagination
      class="pager"
      layout="prev ,pager,next"
      :total="config.total"
      :current-page.sync="config.page"
      @current-change="changePage"
      
    >
    </el-pagination> -->
    </div>
  </div>
</template>

<script>
import CommonForm from '../../components/CommonForm.vue'
export default {
    name:'MRI',
    components:{
      CommonForm,
    },
    data() {
        return{
          orList :[],
          orData:[],
          value:[],
          filterMethod(query, item) {
            return item.label.indexOf(query) > -1;
          },
          total:0,
          tpList:[],
          addTpForm:[],
          orView:[],
          imageUrl01: '',
          imageUrl02: '',
          inputMRI:'',
          tpShow01:false,
          tpShow02:false,
          mriShow:false,
          colorShow:false,
          imgUrl:'',
          colorimgUrl:'',
          imgAddr:'',
          colorImgAddr:'',
          queryInfo:{
            query:'',
          },
          firOpts:[{
              value:'头颈部',
              label:'头颈部'
          },{
              value:'胸心腹盆部',
              label:'胸心腹盆部'
          },{
              value:'脊柱四肢关节部',
              label:'脊柱四肢关节部'
          },],
          secOpts:[{
              value:'颅脑',
              label:'颅脑'
          },{
              value:'喉',
              label:'喉'
          },{
              value:'颞骨岩部',
              label:'颞骨岩部'
          },],
          sectionOpts:[{
              value:'横截面',
              label:'横截面'
          },{
              value:'矢状面',
              label:'矢状面'
          },{
              value:'冠状面',
              label:'冠状面'
          },],
        }
    },
    methods:{
      async getTpList() {
        const { data: res } = await this.$http.get('page/mriList', {
            params: this.queryInfo,
        })
        this.tpList = res.data
        this.total = res.total
        console.log(res)
        },
      async tpCheck01(row){
        const id = row.mriID
        this.mriShow = true
        this.imgUrl = require('../../assets/tpimg/MRI/'+(row.imgAddr))
        const { data: res } = await this.$http.get('page/mri_orView/'+id, {})
        this.orView = res.data
      },
      async tpCheck02(row){
        const id = row.mriID
        this.colorShow = true
        this.colorimgUrl = require('../../assets/tpimg/MRI/'+(row.colorImgAddr))
        const { data: res } = await this.$http.get('page/mri_orView/'+id, {})
        this.orView = res.data
      },
      delDialog(row){
        var me = this;
        this.$confirm('是否删除该图谱','提示',{
          confirmButtonText:"确认",
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
          const id = row.mriID
          this.$http.get('/page/delmritp/'+id,{})
          me.getTpList();
          this.$message({
            type:'success',
            message:'删除成功'
          })
        })
      },
      editDialog(row){
      this.tpShow02=true
      this.addTpForm=(row)
      // this.$http.post('page/editmritp',this.addTpForm).then(res=>{
      //     console.log(res)
      //     this.getTpList()
      // })
      },
      addDialog(){
        this.tpShow01 = true
        this.addTpForm = []
      },
      async addtp(){
        var me = this
        const data = {
          mriID:me.addTpForm.mriID,
          firPart:me.addTpForm.firPart,
          secPart:me.addTpForm.secPart,
          section:me.addTpForm.section,
          imgAddr:me.addTpForm.mriID+'.png',
          colorImgAddr:me.addTpForm.mriID+'彩绘.png',
        }
        console.log(data)
        const{data:res} = await me.$http.post('page/addmritp',me.$qs.stringify(data),Headers)
        console.log(res)
        if(res.status==1){
          this.$message({
              type: 'warning',
              message: res.message
          });
        }
        if(res.status==0){
          this.$message({
              type: 'success',
              message: res.message
          });
          me.tpShow01 = false;
          me.getTpList();
        }
      },
      async edittp(){
        var me = this
        const data = {
          mriID:me.addTpForm.mriID,
          firPart:me.addTpForm.firPart,
          secPart:me.addTpForm.secPart,
          section:me.addTpForm.section,
          imgAddr:me.addTpForm.mriID+'.png',
          colorImgAddr:me.addTpForm.mriID+'彩绘.png',
        }
        console.log(data)
        const{data:res} = await me.$http.post('page/editmritp',me.$qs.stringify(data),Headers)
        console.log(res)
        if(res.status==1){
          this.$message({
              type: 'warning',
              message: res.message
          });
        }
        if(res.status==0){
          this.$message({
              type: 'success',
              message: res.message
          });
          me.tpShow02 = false;
          me.getTpList();
        }
      },
      async searchMRI(){
        const msg = this.inputMRI
        const { data: res } = await this.$http.get('page/searchMRI/'+msg, {
          params: this.queryInfo,
        })
        this.tpList = res.data
        this.total = res.total
        console.log(res)
      },
      async getOrList(){
        const { data: res } = await this.$http.get('page/orlist', {})
        this.orList = res.data
        console.log(this.orList)
        console.log(res)
        this.orList.forEach((organ,index) => {
          this.orData.push({
            label:organ.orName,
            key:index+1
          })
        });
      },
      getOrgans(){
        for(var index in this.value){
          console.log("选中的数据有" + this.orList[this.value[index]-1].orName)
        }
      },
      handleAvatarSuccess01(res, file) {
        this.imageUrl01 = URL.createObjectURL(file.raw);
        console.log(file.name)
      },
      beforeAvatarUpload01(file) {
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isPNG) {
          this.$message.error('上传图片只能是 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isPNG && isLt2M;
      },
      handleAvatarSuccess02(res, file) {
        this.imageUrl02 = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload02(file) {
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isPNG) {
          this.$message.error('上传图片只能是 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isPNG && isLt2M;
      },
    },
  created(){
    this.getTpList()
    this.getOrList()
  },
}
</script>
<style lang="less" scoped>
.manage-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:20px;
}
.tpTable{
    margin: 40px;
}
.tpTable{
    height: calc(100%-62px);
    // 小bug 窗口大小有问题
    background-color: #fff;
    position: relative;
    margin: 20px;
    .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
    }
}
li{
  list-style: none;
}
.tp01,.tp02{
  margin: 0 auto;
}
.avatar-uploader-icon01,.avatar-uploader-icon02 {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar01,.avatar02 {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
</style>
